<template>
  <el-card class="box-card">

    <!--  行内表单  -->
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" size="medium" icon="el-icon-plus" @click="dialogAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <!--  新增弹出框  -->
    <el-dialog
        :title="dialogTitle+'菜单'"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">

      <el-form :model="menuForm" :rules="menuFormRules" ref="menuForm" label-width="100px" class="demo-menuForm">

        <el-form-item label="上级菜单" prop="parentId">
          <el-select v-model="menuForm.parentId" placeholder="请选择上级菜单" filterable style="width: 300px">
            <template v-for="item in tableData">
              <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
              <template v-for="child in item.children">
                <el-option :key="child.id" :label="child.name" :value="child.id">
                  <span>{{ " - " + child.name }}</span>
                </el-option>
              </template>
            </template>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuForm.name"></el-input>
        </el-form-item>

        <el-form-item label="路径" prop="path">
          <el-input v-model="menuForm.path"></el-input>
        </el-form-item>

        <el-form-item label="组件" prop="component">
          <el-input v-model="menuForm.component"></el-input>
        </el-form-item>

        <el-form-item label="图标" prop="icon">
          <el-input v-model="menuForm.icon"></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="orderNum">
          <el-input v-model="menuForm.orderNum"></el-input>
        </el-form-item>

        <el-form-item label="是否隐藏" prop="isHidden">
          <el-radio-group v-model="menuForm.isHidden">
            <el-radio :label=0>否</el-radio>
            <el-radio :label=1>是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('menuForm')">立即{{ dialogTitle }}</el-button>
          <el-button @click="resetForm('menuForm')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>


    <!--  表格内容  -->
    <el-table :data="tableData"
              row-key="id"
              border
              default-expand-all:false
              :header-cell-style="{'text-align':'center'}"
              :cell-style="tableCellStyle"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <!--      <el-table-column prop="parentId" label="上级菜单" sortable></el-table-column>-->

      <el-table-column prop="name" label="菜单名" sortable></el-table-column>

      <el-table-column prop="path" label="路径" sortable></el-table-column>

      <el-table-column prop="component" label="组件" sortable></el-table-column>

      <el-table-column prop="icon" label="图标" sortable></el-table-column>

      <el-table-column prop="orderNum" label="排序" sortable width="100"></el-table-column>

      <el-table-column prop="isHidden" label="隐藏/显示" sortable width="150">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.isHidden"
              active-text="显示"
              inactive-text="隐藏"
              :active-value="0"
              :inactive-value="1"
              @change="changeIsHidden(scope.row.id,scope.row.isHidden)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">

          <el-tooltip effect="dark" content="编辑" placement="top-start">
            <el-button circle icon="el-icon-edit" size="mini" @click="handleEdit(scope.row.id)"/>
          </el-tooltip>

          <el-tooltip effect="dark" content="删除" placement="top-start">
            <el-button circle icon="el-icon-delete" size="mini" type="danger"
                       @click="deleteCheck(scope.row.id)"/>
          </el-tooltip>

        </template>
      </el-table-column>

    </el-table>


  </el-card>
</template>

import { generaMenu } from "@/util/menu";

<script>
import { generaMenu } from '@/util/menu';
import { menuApi } from '@/api';

export default {
  data() {
    return {
      tableData: [],
      menuForm: {},
      //dialog对话框默认不显示
      dialogVisible: false,
      dialogTitle: '',
      menuFormRules: {
        name: [
          {required: true, message: '请输入菜单名称', trigger: 'blur'}
        ],
        path: [
          {required: true, message: '请输入菜单路径', trigger: 'blur'}
        ],
        component: [
          {required: true, message: '请输入组件', trigger: 'blur'}
        ],
        icon: [
          {required: true, message: '请填入图标', trigger: 'blur'}
        ],
        orderNum: [
          {required: true, message: '请输入排序序号', trigger: 'blur'}
        ],
        isHidden: [
          {required: true, message: '请选择是否隐藏', trigger: 'blur'}
        ],
      },
    }
  },

  methods: {
    /*
    查询菜单列表的方法
     */
    loadMenuList() {
      menuApi.getAdminMenuList().then((response) => {
        if (response.data.code === 20000) {
          this.tableData = response.data.data;
        }
      });
    },

    /*
    修改,将当前行数据回显到弹出表单中，并打开表单
     */
    handleEdit(id) {
      menuApi.getMenuInfo(id).then((response) => {
        if (response.data.code === 20000) {
          this.menuForm = response.data.data;
          this.dialogTitle = '修改';
          this.dialogVisible = true;
        }
      });
    },

    /*
    删除选中数据
    */
    deleteCheck(id) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      }).then(() => {
        menuApi.deleteMenu(id).then((response) => {
          if (response.data.code === 20000) {
            this.$message({
              message: '删除成功！',
              type: 'success',
              onClose: () => {
                this.loadMenuList();
                generaMenu();
              }
            });
          }
        });
      }).catch(() => {
        // 取消删除操作
      });
    },

    /**
     * 新增按钮事件
     */
    dialogAdd() {
      this.dialogTitle = "新增";
      this.dialogVisible = true;
    },

    /**
     * 当用户通过点击关闭图标或遮罩关闭 Dialog 时起效的事件
     */
    handleClose() {
      this.resetForm('handleEdit');
      this.dialogVisible = false;
    },

    // 重置弹出框内容
    resetForm(formName) {
      if (this.$refs.form !== undefined) this.$refs.form.resetFields();
      this.menuForm = {};
    },


    /*
    提交表单，有id为修改操作，无id为新增操作
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const apiMethod = this.menuForm.id ? menuApi.updateMenu : menuApi.addMenu;
          apiMethod(this.menuForm).then((response) => {
            if (response.data.code === 20000) {
              this.$message({
                showClose: true,
                message: '操作成功！',
                type: 'success',
                onClose: () => {
                  this.loadMenuList();
                  generaMenu();
                }
              });
            } else {
              this.$message.error(response.data.message);
            }
          });
          this.dialogVisible = false;
          this.resetForm(formName);
        } else {
          alert('请完整填写表单!');
          return false;
        }
      });
    },


    /*
    修改状态，是否隐藏
     */
    changeIsHidden(id, isHidden) {
      this.menuForm.id = id;
      this.menuForm.isHidden = isHidden;
      menuApi.updateMenu(this.menuForm).then((response) => {
        if (response.data.code === 20000) {
          this.$message.success("修改成功！");
          this.loadMenuList();
          generaMenu();
        }
      });
    },


    // 改变单元格背景颜色
    tableCellStyle({row, column, rowIndex, columnIndex}) {
      let rowBackground = {};
      if (row.parentId === null) {
        // rowBackground.background = '#f1ddc9'
      } else {
        rowBackground.background = '#f3e1d3'
      }
      return rowBackground
    },

  },

  computed: {},

  created() {
    this.loadMenuList();
  }
}
</script>

<style scoped>

</style>
